import { useState, useImperativeHandle, Ref } from 'react';
import EasyMahjong from 'components/Mahjong/easy';
import { Button, Modal } from 'antd';

type PreviewParams = { deck: Array<number> };

export interface ExsyGroupModalMethods {
	preview: (params: PreviewParams) => void;
}

interface Props {
	innerRef: Ref<ExsyGroupModalMethods | undefined>;
}

const easyGroupModal = ({ innerRef }: Props) => {
	const [visible, setvisible] = useState(false);
	const [deck, setdeck] = useState<any>([]);
	useImperativeHandle(
		innerRef,
		(): ExsyGroupModalMethods => ({
			preview,
		})
	);

	const preview = ({ deck }: PreviewParams) => {
		setdeck(deck);
		setvisible(true);
	};

	return (
		<Modal
			title='牌型预览'
			open={visible}
			onCancel={() => {
				setvisible(false);
			}}
			footer={
				<Button
					onClick={() => {
						setvisible(false);
					}}>
					好的
				</Button>
			}>
			{deck.map((id: number | string, i: number) => (
				<EasyMahjong id={id} key={i} />
			))}
		</Modal>
	);
};
export default easyGroupModal;
